<script setup lang="ts" name="UserDetail">
const { sys_user_sex, sys_show_hide, sys_user_interest } = useDict("sys_user_sex", "sys_show_hide", "sys_user_interest");

const emit = defineEmits(['closeDialog']);

const props = defineProps({
  id: {
    type: Number,
    default: null,
  },
  title: {
    type: String,
    default: false,
  }
});

const open = ref(false);

const form = ref<UserRecord>({});

/** 获取用户详情 */
function getData() {
  if (isEmpty(props.id)) {
    open.value = true;
  } else {
    getUserApi(props.id).then(response => {
      form.value = response.data;
      open.value = true;
    }).catch(() => {
      closeDialog(false);
    })
  }
}

/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  open.value = false;
  emit("closeDialog", refresh);
}

watch(open, (val) => {
  if (!val) {
    closeDialog(false);
  }
});

getData();
</script>

<template>
  <!-- 用户详情对话框 -->
  <el-dialog :title="title" v-model="open" width="700px" append-to-body>
    <div class="detail-form">
      <el-form ref="userForm" :model="form" label-width="80px">
        <el-form-item label="ID" prop="userId">
          {{ form.userId }}
        </el-form-item>
        <el-form-item label="名字" prop="userName">
          {{ form.userName }}
        </el-form-item>
        <el-form-item label="年龄" prop="userAge">
          {{ form.userAge }}
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <dict-tag :options="sys_user_sex" :value="form.userSex" />
        </el-form-item>
        <el-form-item label="头像" prop="userImg">
          <dict-tag :options="sys_show_hide" :value="form.userImg" />
        </el-form-item>
        <el-form-item label="爱好" prop="userInterest">
          <dict-tag :options="sys_user_interest" :value="form.userInterest" />
        </el-form-item>
        <el-form-item label="生日" prop="userBirthdayTime">
          {{ form.userBirthdayTime }}
        </el-form-item>
        <el-form-item label="描述" prop="userDescribe" class="item-describe">
          {{ form.userDescribe }}
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>